import React from "react";
import styles from "./index.module.less";
import mallIcon from "@images/m-mall-icon.webp";
import buyShowIcon from "@images/m-buy-show-icon.webp";
import tosellIcon from "@images/m-to-sell-icon.webp";
import messageIcon from "@images/m-message-icon.webp";
import myIcon from "@images/m-my-icon.webp";
import { useNavigate } from "react-router-dom";

const bottomItems = [
    { name: "宝库", imgUrl: mallIcon, path: "/mall/goodsRecommend" },
    { name: "买家秀", imgUrl: buyShowIcon, path: "/buyShow" },
    { name: "去卖货", imgUrl: tosellIcon, path: "/tosell" },
    { name: "消息", imgUrl: messageIcon, path: "/chat" },
    { name: "我的", imgUrl: myIcon, path: "/my" },
];

const Mbottom = () => {
    const navigate = useNavigate();

    return (
        <div className={styles.mbottom}>
            <ul className={styles.mbottom_ul}>
                {bottomItems.map((item, index) => {
                    return (
                        <li
                            key={index}
                            onClick={() => {
                                navigate(`/m${item.path}`);
                            }}
                        >
                            <div
                                className={`${styles.icon_wrap} ${
                                    styles[`icon_wrap${index + 1}`]
                                }`}
                            >
                                <img src={item.imgUrl} alt="" />
                            </div>
                            {index !== 2 && (
                                <p className={styles.p1}>{item.name}</p>
                            )}
                        </li>
                    );
                })}
            </ul>
        </div>
    );
};

export default Mbottom;
